<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>数字果园</el-breadcrumb-item>
				<el-breadcrumb-item>基地列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<tableForm :title="'基地列表'" :pageData="pageData" :data="data" :addGo="'/digitalOrchard/working/baseAdd'">
					<template slot="d" slot-scope="scope" style="cursor: pointer;">
						<span>
							<img src="@/assets/image/digitalOrchard/dingwei.png" alt="" style="margin:0 auto;cursor: pointer;" class="mapBtn" @click="detail(scope.row.row)"/>
						</span>
                    </template>
					<template slot="g" slot-scope="scope">
						<el-button type="text" size=" " style="color:#23B14D" @click="detail(scope.row.row)">详情</el-button>
			        	<el-button type="text" size=" " style="color:#E6A23C" @click="modify(scope.row.row)">修改</el-button>
						<el-button type="text" size=" " style="color:red" @click="del(scope.row)">删除</el-button>
                    </template>
				</tableForm>
				<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
			</div>
			
		</div>
	</div>
</template>

<script>
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm
		},
		data() {
			return {
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				pageData: {
					items:[],
				},
                data:[
					{type:'text',prop:'createDate',label:'时间'},
                    {type:'text',prop:'baseName',label:'基地名称'},
                    {type:'text',prop:'area',label:'面积（亩）'},
                    {type:'text',prop:'baseLocation',label:'地点'},
                    {type:'slot',prop:'d',label:'定位'},
                    {type:'text',prop:'contactsName',label:'负责人'},
                    {type:'text',prop:'phone',label:'联系电话'},
                    {type:'slot',prop:'g',},
                ],
				page: 1,
				pageSize: $globalData.pageSize
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 11)
			this.getQueryList()
		},
		mounted() {
			
		},
		watch: {


		},
		methods: {
			mapBtn(e){
				console.log(e);
			},
			getQueryList(){
				if(this.$store.state.company.companyId){
					this.$request.postForm(this.$api.queryList, {
					companyId: this.companyId,
					page:this.page,
					pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.pageData = res.data
						}
					})
				}
			},
			detail(e){
				console.log(e);
				this.$router.push({
					path:'/digitalOrchard/working/baseAdd',
					query: { detailID: e.id }
				})
			},
			modify(e){
				this.$router.push({
					path:'/digitalOrchard/working/baseAdd',
					query: { orchardID: e.id }
				})
			},
			del(e){
				this.$confirm('确定删除这条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
				  console.log(e);
				this.$request.postForm(this.$api.deleteOrchard, {
					orchardId: e.row.id
				}).then(res=>{
					if(res.code == 200){
						this.$message({
                          type: 'success',
                          message: '删除成功!'
                        });
						this.getQueryList()
					}
				})
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
			},
			paginaClick(val) {
				this.page = val
				this.getQueryList()
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #f3f3f3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
